import React from 'react';
import { Popover } from 'antd';
import { WeaTools, WeaAvatar } from 'ecCom';
import WeaPortalAccountList from '../wea-portal-account-list';
import WeaPortalAccountMenu from '../wea-portal-account-menu';
import './index.less';

class WeaPortalAccount extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: false, account: {} };
  }

  componentWillMount() {
    WeaTools.callApi('/api/portal/account/getAccount', 'GET').then((result) => {
      this.setState({ account: result.data || {} });
    });
  }

  render() {
    const { className = '', overlayClassName = '' } = this.props;
    const { visible, account = {} } = this.state;
    const { userid, username } = account;

    const content = (
      <div className={`wea-portal-account-content ${className}`}>
        <WeaPortalAccountList ecId={`${this && this.props && this.props.ecId || ''}_WeaPortalAccountList@4cstnz`} {...this.props} onVisibleChange={this.onVisibleChange} />
        <WeaPortalAccountMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaPortalAccountMenu@c8igcx`} {...this.props} onVisibleChange={this.onVisibleChange} />
      </div>
    );

    return (
      <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@olq9m1`} trigger="click" placement="bottomLeft" content={content} overlayClassName={`wea-portal-account-overlay ${overlayClassName}`} visible={visible} onVisibleChange={this.onVisibleChange}>
        <div className="wea-portal-account">
          <div className="wea-portal-account-avatar">
            <WeaAvatar ecId={`${this && this.props && this.props.ecId || ''}_WeaAvatar@gik99e`} userId={userid} />
          </div>
          <span className="wea-portal-account-username">{username}</span>
          <span className="wea-portal-account-icon">
            <i className="icon-coms-down2" />
          </span>
        </div>
      </Popover>
    );
  }

  onVisibleChange = (visible) => {
    this.setState({ visible });
  };
}

export default WeaPortalAccount;
